<ion-header>
  <ion-toolbar class="dark-bar">
    <ion-buttons slot="start">
      <ion-button color="light" (click)="doPop()">
        <ion-icon name="ios-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>银行卡</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div *ngIf="cardList && cardList.length > 0; else addBlock">
    <article *ngFor="let card of cardList" class="bg-orange" margin-bottom>
      <header padding>
        {{card.bankName}}
      </header>
      <section padding-horizontal text-right>
        {{card.account}}
      </section>
      <footer padding>
        <a (click)="presentAlertConfirm(card.sign)">解绑</a>
        <span float-right>{{card.statusStr}}</span>
      </footer>
    </article>
  </div>

  <ng-template #addBlock>
    <div text-center padding>
      <ion-button color="light" fill="outline" (click)="addCard()">
        <ion-icon name="add"></ion-icon>新增银行卡
      </ion-button>
    </div>
  </ng-template>
</ion-content>
